/**
 * Created by jinhongglin on 15-12-8.
 */
function loadJSON(callback) {

    var json = new XMLHttpRequest();
    json.overrideMimeType("application/json");
    json.open("GET", "../json/package.json", false);
    json.onreadystatechange = function () {
        if (json.readyState == 4 && json.status == "200") {
           callback(json.responseText);
        }
    }
    json.send(null);

}
function init(){
    var actual_JSON =[]
    loadJSON(function(reponse){
         actual_JSON   = JSON.parse(reponse)
    })
    return actual_JSON
}

var information = init()
var ziran_information = information["孜然羊肉片"];
//var value_of_information = information["孜然羊肉片"];
function title_image(ziran_information){
    var img = ziran_information.img;
    var title_image = document.getElementById("title-image");
    for(var i = 0 ; i < img.length ; i++){
        title_image.style.backgroundImage = "url("+img[0]+")"
    }
}
function title_scope(ziran_information){

    var name = document.getElementById("name-title");
    name.innerHTML = ziran_information.name
    //var names = document.createTextNode(ziran_information.name);
    //var introduce = document.getElementById("indroduce");
    //var introduce_characters = document.createTextNode(ziran_information.introduction);
    //para.appendChild(names)
    //introduce.appendChild(introduce_characters)
}
function list(ziran_information){
    var all_materal = ziran_information.materials;
    for(var i = 0 ; i<all_materal.length;i++){
        var material = document.getElementById("material_id")
        //material.innerHTML += "<li>"+"<div class='materal-style'>"+all_materal[i]+"</div>"+
        //    "<div class='materal-indroduce'>" +""+"</div>"+"</li>"
        material.innerHTML += "<li>"+all_materal[i]+"</li>"

        //var material = document.getElementById("material_id")
        //var ul = document.getElementById('material_id');
        //var li = document.createElement("li");
        //li.innerHTML = all_materal[i];
        //ul.appendChild(li);
    }
}
function make_step (ziran_information){
    var make_step = ziran_information.make;
    for(i=0;i<make_step.length;i++){
        var ul = document.getElementById("makers");
        var step = i+1
        ul.innerHTML += "<li>"+"<aside class='aside-style'>"+step+"</aside>" +
            "<div><p class='content-style'>"+make_step[i]+"</p></div>"+"</li>"
        //var li = document.createElement("li");
        //var p = document.createElement("p");
        //var div = document.createElement("div");
        //var aside = document.createElement("aside");
        //var make = document.createTextNode(make_step[i]);
        //var step = document.createTextNode(i+1);
        //aside.appendChild(step);
        //li.appendChild(aside);
        //li.appendChild(div);
        //p.appendChild(make);
        //div.appendChild(p);
        //ul.appendChild(li);
        //p.setAttribute("class","content-style");
        //aside.setAttribute("class","aside-style");
    }
}
function tips(ziran_information){
    var tips = ziran_information.tip;
    for(i=0;i<tips.length;i++){
        var tip = document.getElementById("tipr");
        tip.innerHTML += tips[i]+"<br>"
        //var tipers=document.createTextNode(tips[i]);
        //var br = document.createElement("br");
        //tip.appendChild(tipers);
        //tip.appendChild(br);
    }
}
title_scope(ziran_information);
list(ziran_information);
make_step (ziran_information);
tips(ziran_information);
title_image(ziran_information);

